<script lang="ts" setup>
import { onMounted,ref, shallowReactive } from 'vue'
import { uuid } from './../function/index'
// data-tauri-drag-region 
import {appWindow,currentMonitor,WebviewWindow} from '@tauri-apps/api/window'
import { invoke } from '@tauri-apps/api/tauri';
import {writeBinaryFile,BaseDirectory,createDir} from '@tauri-apps/api/fs'
appWindow.setDecorations(false);
const left = ref<number>(0);
const top = ref<number>(0);
const width = ref<number>(10);
const height = ref<number>(10);
const show = ref<boolean>(false);
const monitor = ref<any>();
currentMonitor().then((res)=>{
  monitor.value = res as any
});
const mouseDown = function(e:any){
  show.value=true;
  let rect:any = document.getElementById('rect');
  rect.style.width='1px';
  rect.style.height="1px";
  left.value = e.screenX;
  top.value = e.screenY;
  width.value = 1;
  height.value = 1;
  rect.style.left=e.screenX+'px';
  rect.style.top=e.screenY+'px';
}

const onMouseMove = function(e:any){
  if(!show.value) return;
  width.value = Math.abs(e.clientX - left.value);
  height.value = Math.abs(e.clientY - top.value);
  let rect:any = document.getElementById('rect');
  console.log(width.value,height.value);
  rect.style.width = width.value+'px';
  rect.style.height = height.value+'px';
}

const mouseUp =async function(){
  show.value=false;
  let name:string = uuid()
  console.log({
      left:Math.trunc(left.value*monitor.value?.scaleFactor),
      top:Math.trunc(top.value*monitor.value?.scaleFactor),
      width:Math.trunc(width.value*monitor.value?.scaleFactor),
      height:Math.trunc(height.value*monitor.value?.scaleFactor),
      screenx:monitor.value?.position.x,
      screeny:monitor.value?.position.y,
      screenwidth:monitor.value?.size.width,
      screenheight:monitor.value?.size.height
    })

  const arr:any = await invoke('screenshots',
    {
      left:Math.trunc(left.value*monitor.value?.scaleFactor),
      top:Math.trunc(top.value*monitor.value?.scaleFactor),
      width:Math.trunc(width.value*monitor.value?.scaleFactor),
      height:Math.trunc(height.value*monitor.value?.scaleFactor),
      screenx:monitor.value?.position.x,
      screeny:monitor.value?.position.y,
      screenwidth:monitor.value?.size.width,
      screenheight:monitor.value?.size.height
    });
  await writeBinaryFile(name+'.png',arr, { dir: BaseDirectory.AppData });
  const image = new WebviewWindow(name,{
    title:name,
    url:'/#/image',
    width:Math.trunc(width.value*monitor.value?.scaleFactor)>100?Math.trunc(width.value*monitor.value?.scaleFactor):400,
    height:Math.trunc(height.value*monitor.value?.scaleFactor)>100?Math.trunc(height.value*monitor.value?.scaleFactor):400,
    decorations:true,
    skipTaskbar:true,
  });
  // const rgba = await invoke('getcolor',{
  //   left:Math.trunc(left.value),
  //   top:Math.trunc(top.value),
  //   width:1,
  //   height:1,
  // });
  // console.log(rgba);
  appWindow.close()
}
onMounted(()=>{

})

</script>

<template>
  <div class="screenshot" id="drawarea" @mousedown="mouseDown" @mousemove="onMouseMove" @mouseup="mouseUp">
    <div v-show="show" id="rect" class="rect"></div>
  </div>
</template>

<style>
.screenshot{
    width: 100vw;
    height: 100vh;
    background: transparent !important;
    position: relative;
    cursor:crosshair;
}

.rect {
  opacity: 0.1;
  background: black;
  position: absolute;
}

</style>